<template>
	<view>
		<u-navbar title="心之温" :is-back="false" :title-size="38" :height="30" />
		<view class="custom-card" @click="toDetails">
			<view class="custom-card__body">
				<view class="weather-display">
					<view class="card-icons">
						<i :class="['qi-' + (weather.icon || '100'), 'weather-icons']"></i>
					</view>
					<view class="temperature-display">
						<text class="temp-text"><text style="color: red;">{{ weather.temp || '---' }}</text>℃</text>
						<u-divider text=""></u-divider>
						<text v-if="weather.warmReminder" class="reminder-text">{{ weather.warmReminder || '---' }}</text>
						<u-loading v-else mode="circle" color="#409EFF" size="40"></u-loading>
					</view>
				</view>
			</view>
		</view>

		<!-- 内容部分 -->
		<view class="weather-cards">
			<view class="weather-card">
				<view class="card-icon">
					<i class="qi-1014" style="font-size: 30px;color: #4A90E2;"></i>
				</view>
				<view class="card-content">
					<text class="card-value">{{ weather.humidity ? weather.humidity + ' %' : '---' }}</text>
					<text class="card-label">湿度</text>
				</view>
			</view>

			<view class="weather-card">
				<view class="card-icon">
					<i class="qi-1036" style="font-size: 30px;color: #7FB3D5;"></i>
				</view>
				<view class="card-content">
					<text class="card-value">{{ weather.windScale ? weather.windScale + ' 级' : '---' }}</text>
					<text class="card-label">风力</text>
				</view>
			</view>

			<view class="weather-card">
				<view class="card-icon">
					<i class="qi-1034" style="font-size: 30px;color: #FF6B6B"></i>
				</view>
				<view class="card-content">
					<text class="card-value">{{ weather.feelsLike ? weather.feelsLike + ' ℃' : '---' }}</text>
					<text class="card-label">体感温度</text>
				</view>
			</view>

			<view class="weather-card">
				<view class="card-icon">
					<i class="qi-1040" style="font-size: 30px;color: #9B59B6"></i>
				</view>
				<view class="card-content">
					<text class="card-value">{{ weather.windSpeed ? weather.windSpeed + ' km/h' : '---' }}</text>
					<text class="card-label">风速</text>
				</view>
			</view>
		</view>

		<!-- 温馨一言模块 -->
		<view class="motivation-container">
			<view class="motivation-card">
				<view class="motivation-title">今日温馨一言</view>
				<view v-if="weather.awarmWord" class="motivation-text">{{ weather.awarmWord || '---' }}</view>
				<u-loading v-else mode="circle" color="#409EFF" size="40"></u-loading>
			</view>
		</view>

		<!-- 未来七天天气预报 -->
		<view class="forecast-container">
			<view class="forecast-title">
				<view style="display: flex; align-items: center; justify-content: center; gap: 8px;">
					<i class="qi-104" style="font-size: 23px; color: #1890FF;"></i>
					<text style="line-height: 1;">未来七天天气预报</text>
				</view>
			</view>
			<view class="forecast-cards">
				<view v-for="day in forecastData.length ? forecastData : defaultForecast" :key="day.fxDate || dayIndex"
					class="forecast-card">
					<view class="forecast-date">{{ day.fxDate || '---' }}</view>
					<view class="forecast-icon">
						<i :class="['qi-' + (day.iconDay || '100'), 'forecast-icon']"></i>
					</view>
					<view class="forecast-details">
						<text class="forecast-temp">
							{{ day.tempMin && day.tempMax ? day.tempMin + '℃~' + day.tempMax + '℃' : '---' }}
						</text>
						<text class="forecast-text">{{ day.textDay || '---' }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import '@/utils/request.js'
	import {
		getIndexData,
		getWxtx,
		getWxyy
	} from '@/api/api'
	export default {
		data() {
			return {
				weather: {
					obsTime: '',
					temp: '',
					feelsLike: '',
					icon: '',
					text: '',
					wind360: '',
					windDir: '',
					windScale: '',
					windSpeed: '',
					humidity: '',
					precip: '',
					pressure: '',
					vis: '',
					cloud: '',
					dew: '',
					awarmWord: '',
					warmReminder: ''
				},
				forecastData: [],
				defaultForecast: Array.from({
					length: 7
				}).map(() => ({
					fxDate: '',
					iconDay: '',
					tempMin: '',
					tempMax: '',
					textDay: ''
				})),
				longitudeInfo: {}
			};
		},
		async mounted() {
			console.log('store:', this.$store);
			try {
				const locations = await this.$store.dispatch('location/initLocation');
				this.longitudeInfo = {
					latitude: parseFloat(locations.latitude.toFixed(2)),
					longitude: parseFloat(locations.longitude.toFixed(2))
				}

				console.log('用户地址信息：')
				console.log(this.longitudeInfo)
			} catch (e) {
				console.log(e)
				uni.showToast({
					title: '请先授权定位',
					icon: 'none',
					duration: 2000 // 显示 2 秒
				});
			}

			this.getIndexData();
		},
		methods: {
			/**获取 AI 天气温馨提醒 */
			getWxtx(data) {
				let param = {
					...data
				}
				getWxtx(param).then(res => {
					if(res.code === 200){
						this.weather.warmReminder = res.message
					}
				})
			},
			/**获取 AI 天气温馨一言 */
			getWxyy(data) {
				let param = {
					...data
				}
				getWxyy(param).then(res => {
					if(res.code === 200){
						this.weather.awarmWord = res.message
					}
				})
			},
			toDetails() {
				uni.navigateTo({
					url: '/pages/index/details'
				})
			},
			getIndexData() {
				let param = {
					...this.longitudeInfo
				}
				getIndexData(param).then(res => {
					if (res.code == 200 && res.data) {
						let data = res.data
						this.weather = data
						if (data.weatherList) {
							this.forecastData = data.weatherList
						}

						this.getWxtx(data)
						
						this.getWxyy(data)

						uni.showToast({
							title: '请求成功！',
							icon: "success",
							duration: 2000
						})
					} else {
						uni.showToast({
							title: '请求失败！',
							icon: "none",
							duration: 2000
						})
					}
				})
			}
		}
	};
</script>

<style scoped>
	.custom-card {
		border-radius: 10px;
		/* 圆角 */
		border: 1px solid #ebeef5;
		/* 边框颜色 */
		background-color: #fff;
		/* 背景色 */
		box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.15);
		/* 阴影 */
		transition: box-shadow 0.3s;
		/* 悬停动画 */
		margin-bottom: 20px;
		/* 卡片间距 */
		margin: 10px;
	}

	/* 悬停效果 */
	.custom-card:hover {
		box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.15);
		background-color: #E0E0E0;
	}

	/* 卡片内容 */
	.custom-card__body {
		padding: 20px;
		/* 内边距 */
	}

	.temperature-display {
		width: 60%;
		display: flex;
		flex-direction: column;
		/* 使子元素垂直排列 */
		align-items: center;
		/* 水平居中 */
		text-align: center;
	}

	.temp-text {
		width: 100%;
		font-size: 24px;
		font-family: 'Arial', sans-serif;
		font-size: 48px;
		font-weight: 300;
		color: #333;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;

	}

	.reminder-text {
		font-size: 18px;
		/* 提醒文字字体大小 */
	}

	.temperature-display:hover {
		color: #007BFF;
		text-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
	}

	.weather-cards {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		gap: 16px;
		/* 卡片间距 */
		padding: 12px;
	}

	.weather-card {
		width: calc(50% - 8px);
		/* 一行两个，考虑gap */
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		/* 阴影 */
		padding: 16px;
		display: flex;
		align-items: center;
		transition: transform 0.3s, box-shadow 0.3s;
	}

	.weather-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
		background-color: #E0E0E0;
	}

	.card-icon {
		width: 40px;
		height: 40px;
		margin-right: 12px;
	}

	.weather-icon {
		font-size: 30px;
		/* 图标大小 */
		color: #1890ff;
		/* 图标颜色 */
		vertical-align: middle;
		/* 对齐调整 */
	}

	.card-icons {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40%;
	}

	.weather-icons {
		font-size: 70px;
		/* 图标大小 */
		color: #1890ff;
		/* 图标颜色（蓝色） */
	}

	.card-content {
		display: flex;
		flex-direction: column;
	}

	.card-value {
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}

	.card-label {
		text-align: center;
		font-size: 18px;
		color: #666;
		margin-top: 4px;
	}

	/* 温度与图标水平布局 */
	.weather-display {
		display: flex;
	}

	/* 未来七天天气预报容器 */
	.forecast-container {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		margin: 20px 0;
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
	}

	/* 标题样式 */
	.forecast-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
		text-align: center;
	}


	/* 天气卡片容器 */
	.forecast-cards {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
	}

	/* 每天的天气卡片 */
	.forecast-card {
		width: calc(32% - 8px);
		background-color: #fff;
		border-radius: 8px;
		padding: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		text-align: center;
		transition: transform 0.3s, box-shadow 0.3s;
	}

	.forecast-card:hover {
		background-color: #E0E0E0;
		transform: translateY(-4px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	/* 日期样式 */
	.forecast-date {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
	}

	/* 天气图标样式 */
	.forecast-icon {
		font-size: 36px;
		color: #1890ff;
		margin-bottom: 8px;
	}

	/* 天气详情样式 */
	.forecast-details {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.forecast-temp {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.forecast-text {
		font-size: 14px;
		color: #666;
	}

	/* 温馨一言容器 */
	.motivation-container {
		background-color: #f9f9f9;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
	}

	/* 温馨一言卡片 */
	.motivation-card {
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		text-align: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* 标题样式 */
	.motivation-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
	}

	/* 鼓励话语样式 */
	.motivation-text {
		font-size: 16px;
		color: #666;
		line-height: 1.5;
		margin-top: 10px;
		font-style: italic;
	}
</style>